<template>
    <div class='beautywrap'>
        <img :src="img12" alt="">
        <div class='scrollwrap'>
            <ul class='ul3'>
                <li v-for='(item,index) in 9' :key='index'>
                    <img :src="img13" alt="">
                    <span class='z1'>澳荣大金瓶24K纳米黄金精华液</span>
                    <div class='ul3div'>
                        <strong>活动</strong>
                        <span class='div2span'>￥299</span>
                        <i class='div2i'>￥599</i>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import img13 from '@/assets/imgindex/2.png'
import img12 from '@/assets/imgindex/7.png'
import BScroll from 'better-scroll'
export default {
    data() {
        return {
            img12,
            img13
        }
    },
    mounted(){
         let bScroll = new BScroll('.scrollwrap', { 
                    //*************************         
                    click: true,         
                    scrollX:true,
                    scrollY:false
        })  
    }
}
</script>

<style lang='stylus'>
    .beautywrap{
        width 100%
        margin-top 20px
        img{
            width 100%
            height 239px
        }
        .scrollwrap{
            width 100%
            height 205px
            ul{
                
                overflow hidden
                display inline-flex 
                li{
                    display flex
                    flex-direction column
                    justify-content center
                    align-items center
                    img{
                        margin-top 15px
                        margin-left 10px
                        width 45px
                        height 105px
                    }
                    .z1{
                        width 109px
                        height 22px
                        font-size: 10px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #333333;
                        line-height: 12px;
                        margin-left 19px
                        margin-top 21px
                    }
                    .ul3div{
                        margin-top 10px
                        width 92px
                        height 18px
                        display flex
                        justify-content flex-start
                        align-items center
                        
                        strong{
                            width 24px
                            height 13px
                            background #BB2742
                            color #fff
                            line-height 13px
                            text-align center
                            font-size 8px
                        }
                        .div2span{
                            width 33px
                            display flex
                            justify-content center
                            align-items center
                            font-size: 11px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #BB2742;
                            
                        }
                        .div2i{
                            text-decoration line-through
                            font-size: 9px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #999999;
                            
                        }
                    }
                }
            }
        }
        
    }
</style>